﻿@{
    Layout = "~/Views/Shared/_LayoutBusiness.cshtml";
}


@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.tabs .tab-links a').on('click', function (e) {
            var currentAttrValue = jQuery(this).attr('href');

            // Show/Hide Tabs
            jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
            jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
    });
</script>


<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Danh sách bảng kê</a></li>
        <li><a href="#tab2">Danh sách địa chỉ</a> </li>
    </ul>
    <hr>
    <div class="tab-content">
        <div id="tab1" class="tab active">
            @RenderPage("../HouseHold/IndexHouseHold.cshtml")
        </div>

        <div id="tab2" class="tab">
            @RenderPage("../Address/IndexAddress.cshtml")
        </div>
    </div>
</div>

<style>
    .tabs {
        width: 100%;
        display: inline-block;
    }

    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display: block;
        clear: both;
        content: '';
    }

    .tab-links li {
        margin: 0px 5px;
        float: left;
        list-style: none;
    }

    .tab-links a {
        padding: 9px 15px;
        display: inline-block;
        border-radius: 3px 3px 0px 0px;
        background: #7FB5DA;
        font-size: 16px;
        font-weight: 600;
        color: #4c4c4c;
        transition: all linear 0.15s;
    }

        .tab-links a:hover {
            background: #a7cce5;
            text-decoration: none;
        }

    li.active a, li.active a:hover {
        background: #fff;
        color: #4c4c4c;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        padding: 15px;
        border-radius: 3px;
        box-shadow: -1px 1px 1px rgba(0,0,0,0.15);
        background: #fff;
    }

    .tab {
        display: none;
    }

        .tab.active {
            display: block;
        }
</style>

